import {Upload,Modal} from 'antd';
import React from "react";
import {CaretLeftOutlined,CaretRightOutlined}from '@ant-design/icons';
import {renderIcon, VJsonComponent, VJsonComponentBase} from "../../factory";
import _ from "lodash";
import * as Extend from "../../extend";
import {YvanEventDispatch} from "../..";
import ImgCrop from 'antd-img-crop';

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
export interface UploaderVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

}

export interface UploaderState {
    previewVisible:any,
    previewImage:any,
    fileList: any[],
    previewTitle:any
}

@VJsonComponent({
    view: 'imgUploader'
})
export default class ImgUploader extends VJsonComponentBase<UploaderVJsonProp, UploaderState> {
    static defaultProps = {
        loading: false,
        visible: true,
        fileList: [],
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            this.props.vjson,
            ImgUploader.defaultProps
        )
        this.state = {
            previewVisible: false,
            previewImage: '',
            fileList: [],
            previewTitle: '',
            
        }
    }


    get loading() {
        return this.props.vjson.loading
    }

    set loading(v) {
        this.props.vjson.loading = v
    }
    handleCancel = () => this.setState({ previewVisible: false });

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
          }
      
          this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
          });
    };

    onChange = ({fileList}) => {
        this.setState({ fileList });
        YvanEventDispatch(this.props.vjson.onChange, this,fileList);
    };
    render() {
        if (Extend.isDebugMode()) {
            console.log('RenderUpload', this.toString())
        }
        if (!this.props.vjson.visible) {
            return null
        }
        const { previewVisible, previewImage, fileList } = this.state;
        const props = {
            // width: this.props.vjson.width,  //裁剪宽度
            // height: this.props.vjson.height, //裁剪高度
            resize: true, //裁剪是否可以调整大小
            resizeAndDrag: true, //裁剪是否可以调整大小、可拖动
            modalTitle: "上传图片", //弹窗标题
            modalWidth: 600, //弹窗宽度
            rotatable:true
        };
        return (
            // @ts-ignore
            <div className="img-uploader" view_id={this.key}>
                <ImgCrop {...props}>
                    <Upload
                        name={this.props.vjson.name}
                    　  action={this.props.vjson.url}
                        accept="image/*"
                        listType="picture-card"
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.onChange}
                    >
                        {this.props.vjson.text}　
                    </Upload>
                </ImgCrop>
                <Modal
                    visible={previewVisible}
                    title='查看图片'
                    footer={null}
                    onCancel={this.handleCancel}
                    >
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                    </Modal>
            </div>
        )
    }
}